<template>
  <div class="CPT_WinPanel">
    <div
      class="winDrawer flexMode vr hc"
      :class="winPanel ? 'active' : ''"
      @click.stop="toggleWinPanel"
    >
      <div class="winArea" @click.stop="" @contextmenu.prevent="">
        <el-scrollbar class="yscrollbar">
          <div class="p20">
            <input
              type="text"
              placeholder="搜索..."
              class="winInput"
              @click.stop=""
            />
          </div>
          <div class="p10 txt-dark5 fs14">APPS</div>
          <div class="flexMode felxWrap p0-20">
            <div
              v-for="(it, i) in winApps"
              :key="i"
              class="icon hover-01 w100 h100 flexMode flexV hc vc fs36 radius4"
              :title="it.meta.label"
              @click="toOpen(it)"
            >
              <Icon :meta="it.meta" />
              <div
                class="fs12 pt10 txt-nowrap w80"
                v-html="it.meta.label"
              />
            </div>
          </div>
          <div class="p10 txt-dark5 fs14">格式参考</div>
          <div class="flexMode flexWrap p0-20 relative">
            <BorderFactory :scrollTop="scrollTop2">
              <div class="flexMode flexWrap">
                <BorderFactoryItem
                  v-for="(it, i) in winFormats"
                  :key="i"
                  class="m5 w100 h100 flexMode flexV hc vc fs36 radius4"
                >
                  <Icon :meta="it.value" />
                  <span class="fs12 pt10">{{ it.label }}</span>
                  <span class="fs12 txt-dark3 pt5">{{ it.value }}</span>
                </BorderFactoryItem>
              </div>
            </BorderFactory>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script>
import { common } from "map"
export default {
  inheritAttrs: false,
  name: "CPT_WinPanel",
  props: {
    test: {
      type: String,
      default: "",
    },
  },
  computed: {
    winPanel() {
      return this.$store.state.desk.winPanel
    },
    scrollTop2() {
      const winappHeight = Math.ceil(this.winApps.length / 6) * 100
      const topHeight = parseInt(document.body.clientHeight * 0.1)
      const formatHeight = Math.ceil(this.winFormats.length / 6) * 100
      const scrollTop = 88 + 36 * 2 + topHeight + winappHeight + formatHeight
      console.info(scrollTop)
      return scrollTop
    },
  },
  data() {
    return {
      winFormats: [], //可用格式概览，无意义可删除
      winApps: [], //需要在winPanel展示的app，通过meta.inwin定义
    }
  },
  created() {
    this.init()
  },
  methods: {
    toOpen(it) {
      this.$store.dispatch("desk/openWindow", it)
      this.toggleWinPanel()
    },
    init() {
      this.initFormat()
      this.initApps()
    },
    async initApps() {
      const apps = this.$apps
      const winApps = []
      await this.filterInwin(winApps, apps)
      this.winApps = winApps
    },
    filterInwin(aim, v) {
      v.map(it => {
        if (it.meta.inwin) {
          aim.push(it)
        }
        if (it.children?.length) {
          this.filterInwin(aim, it.children)
        }
      })
    },
    initFormat() {
      const { format } = common
      const r = this.$key2Array(format)
      this.winFormats = r
    },
    toggleWinPanel() {
      this.$store.commit("desk/toggleWinPanel")
    },
  },
}
</script>
<style lang="scss" scoped>
.winDrawer {
  height: 100vh;
  width: 100vw;
  padding-bottom: 3rem;
  position: fixed;
  overflow: hidden;
  opacity: 0;
  transition: $trans5;
  transition-property: opacity;
  transform: translateY(100vh);
  &.active {
    transform: translateY(0);
    z-index: 999;
    opacity: 1;
  }
  .winArea {
    height: 90vh;
    width: 750px;
    border: 1px $white5 solid;
    background-color: $white7;
    box-shadow: $dark1 0 $dis10 $dis20;
    border-radius: $dis10 $dis10 0 0;
    backdrop-filter: saturate(150%) blur(4px);
  }
}
.winInput {
  height: 3rem;
  width: 100%;
  border: 2px $white1 solid;
  background-color: $white7;
  border-radius: 1.5rem;
  outline: none !important;
  color: $dark7;
  text-align: center;
  font-size: 1rem;
  transition: $trans1;
  box-shadow: $blue2 0 0 $dis10 inset;
  &::placeholder {
    color: $dark2;
    letter-spacing: 2px;
  }
  &:focus {
    border-color: $blue;
    color: $blue;
    box-shadow: $dark1 0 0 $dis10, $blue3 0 0 $dis5 inset;
  }
}
</style>
